<template>
	<view class="userinfoPage">
		<u-navbar title="个人资料" bgColor="#fff" :autoBack="true">
		</u-navbar>
		<view class="userContent flex_shu">
			<view class="userHead">
				<button class="avatarBox" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image v-if="userInfo.avatar" :src="userInfo.avatar" mode="" class="tx-img"></image>
					<image v-else :src="imgUrl + 'userHead.png'" mode="" class="addAvatar"></image>
				</button>
				<view class="cameraBox">
					<image :src="imgUrl + 'carmar.png'" mode="" class="cameraImg"></image>
				</view>

				<view class="nickName">
					{{userInfo.nickName}}
				</view>
			</view>


			<view class="userInfoBox">
				<view class="topBox flex_heng">
					修改<u-icon name="edit-pen-fill" color="#666666"></u-icon>
				</view>
				<view class="inputBox flex_heng">
					<view class="formItemLeft">
						昵称
					</view>
					<view class="formItemRight">
						<input v-model="userInfo.nickName" type="nickname" @change="fpNumInput" placeholder="请输入昵称">
					</view>
				</view>

				<view class="inputBox flex_heng">
					<view class="formItemLeft">
						手机号
					</view>
					<view class="formItemRight">
						<u-button open-type="getPhoneNumber" @getphonenumber="getNumber">{{userInfo.phone || '点击授权'}}</u-button>
					</view>
				</view>

				<view class="inputBox flex_heng">
					<view class="formItemLeft">
						邮箱
					</view>
					<view class="formItemRight">
						<input v-model="userInfo.email" placeholder="请输入邮箱">
					</view>
				</view>
			</view>

			<!-- 		<view class="addressbtn" @tap="goAddress">
				收货地址
			</view> -->

		</view>

		<view class="subbtn" @tap="submitUserInfo">
			保存编辑
		</view>

		<view class="btmbtn" @tap="logout">
			退出登录
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		getUserInfo,
		bindPhone,
		updateInfo
	} from '@/api/api.js'
	const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	import CONFIG from '@/config/config.js';
	const PATH = CONFIG.baseUrl;
	export default {
		components: {
			// navber
		},
		data() {
			return {
				titleHeight: 0,
				imgUrl: this.$imgUrl,
				menuButtonInfo: menuButtonInfo, //右侧胶囊详细信息
				userInfo: {
					nickName: '',
					avatar: null,
					phone: null
				},
				sexShow: false,
			};
		},
		computed: {
			...mapState(['hasLogin', 'safeAreaBottom'])
		},
		onLoad() {

		},
		onShow() {
			this.findUserInfo()
			this.token = uni.getStorageSync('token');
		},
		methods: {
			//保存修改
			submitUserInfo() {
				updateInfo(this.userInfo).then(res => {
					console.log('res', res)
					uni.showToast({
						title: '修改成功',
						icon: "none"
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/mine/mine'
						})
					}, 1000)
				})
			},
			//绑定手机号
			getNumber(e) {
				uni.showLoading()
				bindPhone({
					params: {
						code: e.detail.code
					}
				}).then(res => {
					// console.log('手机号', res)
					uni.hideLoading()
					this.userInfo.phone = res.data.phone
				})
			},

			findUserInfo() {
				getUserInfo().then(res => {
					if (res.code == 200) {
						this.userInfo = res.data
					}
				})
			},
			goAddress() {
				uni.navigateTo({
					url: '/pages/package/myAddress/myAddress'
				})
			},


			logout() {
				uni.clearStorageSync()
				uni.reLaunch({
					url: '/pages/package/login/login'
				})
			},


			fpNumInput(e) {
				console.log('e', e)
				this.userInfo.nickName = e.detail.value
			},

			onChooseAvatar(e) {
				console.log('e', e)
				let that = this
				let avatarUrl = e.detail.avatarUrl;
				let uploadUrl = `${PATH}/common/upload`
				uni.uploadFile({
					url: uploadUrl, //仅为示例，非真实的接口地址
					filePath: avatarUrl,
					name: 'file',
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (uploadFileRes) => {
						if (uploadFileRes.statusCode == 200) {
							console.log('uploadFileRes', JSON.parse(uploadFileRes.data))
							that.userInfo.avatar = JSON.parse(uploadFileRes.data).url
							uni.$u.toast('头像上传成功');
						} else {
							uni.$u.toast('头像上传失败');
						}
					}
				});
			},

		},
	};
</script>
<style>
	page {
		width: 100vw;
		height: 100vh;
		background: #F6F6F6 !important;
	}
</style>

<style lang="scss">
	.userinfoPage {
		width: 100vw;
		padding: 0 24rpx;
		box-sizing: border-box;
		padding-top: 196rpx;
		background: #F6F6F6;

		.userContent {
			position: absolute;
			top: 196rpx;
			left: 50%;
			transform: translate(-50%, 0);
			width: 702rpx;
			// height: 1300rpx;
			background: #F6F6F6;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			padding: 100rpx 0 546rpx;
			box-sizing: border-box;

			.userHead {
				width: 196rpx;
				height: 196rpx;
				position: relative;

				.nickName {
					width: 100vw;
					text-align: center;
					position: absolute;
					bottom: -80rpx;
					left: 50%;
					transform: translateX(-50%);
					color: #000000;
					font-size: 32rpx;
					font-weight: 500;
				}

				.cameraBox {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					overflow: hidden;

					.cameraImg {
						width: 100%;
						height: 100%;
					}
				}

				.avatarBox {
					width: 196rpx;
					height: 196rpx;
					position: absolute;
					padding: 0 !important;
					background: none !important;
					border: 1rpx solid #1078f9;
					border-radius: 50%;

					.addAvatar {
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
					}

					.tx-img {
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
					}
				}

				.avatarBox::after {
					border: none;
				}

				::v-deep.button-hover {
					background: none;
				}

			}

			.userInfoBox {
				margin-top: 100rpx;
				width: 694rpx;
				height: 370rpx;
				border-radius: 16rpx;
				opacity: 1;
				background: #ffffff;
				padding: 28rpx;
				box-sizing: border-box;

				.topBox {
					width: 100%;
					height: 70rpx;
					border-bottom: 1rpx solid #f0f0f0;
					color: #666666;
					font-size: 28rpx;
					font-weight: 400;
					justify-content: flex-end;
				}

				.inputBox {
					width: 100%;
					height: 90rpx;
					box-sizing: border-box;

					.formItemLeft {
						font-family: HarmonyOS Sans SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
					}

					.formItemRight {
						width: calc(100% - 130rpx);
						padding-right: 20rpx;
						position: relative;

						input {
							height: 52rpx;
							line-height: 52rpx;
							text-align: right;
							font-family: HarmonyOS Sans SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #000000;
						}

						.input-placeholder {
							font-family: HarmonyOS Sans SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #999999;
						}

						.avatarBox::after {
							border: none;
						}

						::v-deep.button-hover {
							background: none;
						}

						.u-input {
							// height: 52rpx;
							// line-height: 52rpx;
							padding: 0 10rpx !important;
							box-sizing: border-box;
							border: none;
							text-align: right;
						}

						.u-button {
							background: transparent;
							border: none;
							text-align: right;
							justify-content: flex-end;
							padding: 0 0;
						}

					}


					.otherClass {
						width: calc(100% - 230rpx);
						padding-right: 20rpx;
						text-align: left;
						font-family: HarmonyOS Sans SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #999999;
					}
				}
			}


			.addressbtn {
				width: 654rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				background: #1078f9;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				font-family: HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #fff;
			}

		}

		.subbtn {
			position: absolute;
			bottom: 250rpx;
			left: 50%;
			transform: translate(-50%, 0);
			width: 686rpx;
			height: 116rpx;
			line-height: 116rpx;
			text-align: center;
			background: #000000;
			border-radius: 32rpx;
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #fff;
		}

		.btmbtn {
			position: absolute;
			bottom: 130rpx;
			left: 50%;
			transform: translate(-50%, 0);
			width: 686rpx;
			height: 116rpx;
			line-height: 116rpx;
			text-align: center;
			background: #000000;
			border-radius: 32rpx;
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.sexPopup {
			width: 654rpx;
			height: 404rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			padding: 32rpx 24rpx;
			box-sizing: border-box;

			.sexItem {
				width: 100%;
				height: 100rpx;
				background: #F5F5F5;
				border-radius: 53rpx;
				text-align: center;
				line-height: 100rpx;
				font-family: HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #1A1A1A;

				.itemImg {
					width: 36rpx;
					height: 36rpx;
					vertical-align: middle;
					margin-right: 8rpx;
				}
			}
		}

	}

	.flex_heng {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}

	.flex_shu {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}
</style>